    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>常用标签</title>
</head>
<!--
注意：标签的属性之间要以空格隔开
所有标签都有的属性：
    id属性    用来标识元素的唯一性
    name属性  提交数据的参数名
    style属性 设置元素的行内样式（具体的样式）
    class属性 设置元素的样式名
body标签
    bgcolor 背景颜色     1.颜色名 2.rgb 3.16进制
    text    字体颜色     1.颜色名 2.rgb 3.16进制
标题标签
    <h1></>h1>~<h6></h6>> 依次从大到小
    不建议在页面中写多个h1标签，h1标签可以被搜索引擎获取到，如果有多个，可能会进入搜索引擎的黑名单。
水平线标签
    <hr>
    width 宽度    1.百分比 2.px
    align 对齐方式  left right center(默认)
    size  水平线粗细
段落标签
    <p></p> 段落会自动换行
    常用属性
        align 对齐方式
            left    居左对齐（默认）
            right   居右对齐
            center  居中对齐
            justify 两端对齐
换行标签
    <br>  <br/>
列表
    无序列表
        格式：
            <ul>
                <li></li>
                <li></li>
            </ul>
        常用属性
            type 列表图标
                square  实心方块
                circle  空心圆
                disc    实心圆
    有序列表
        格式
            <ol>
                <li></li>
                <li></li>
            </ol>
        常用标签
            type    列表图标
                1   数字序号
                a   小写字母
                A   大写字母
                i   小写罗马字母
                I   大写罗马字母
div标签
    层，块级元素，标签会自动换行
    常用于布局
    常用属性
        align   siv元素中内容的对齐方式
span标签
    块，行内元素，标签不会自动换行
格式化标签
    font(行内元素，不会自动换行)
        设置字体相关属性
            color   字体颜色（颜色名、十六进制、rgb）
            size    字体大小
            face    字体风格
    pre
        定义预格式文本。保留文本中的空格与换行。
    粗体
        b strong
    斜体
        i
    下划线
        u
    中划线
        del
    下标
        sub
    上标
        sup
超链接a标签
    定义超链接，用于从一个页面链接到另外一个页面
    行内元素，不会自动换行。
    常用属性
        href    必须标签（如果未设置该属性，则a标签与普通文本无区别）
            需要跳转的地址
        target  窗口打开方式
                _self   当前窗口打开（默认）
                _blank  新开空白窗口打开
                _parent
                _top
     锚点实现
        如果想要跳转到当前页面
            href属性指向a标签的name属性值
            href属性指向其他标签的id属性值
            <a href=""></a>
            <a href="#"></a>
图片
    img标签，行内标签，不会自动换行
    必须属性
        src     被引入图片的地址
    常用属性
        title   当鼠标悬停在图片上时显示的地址
        alt     当图片加载时显示的文本
        width   设置图片的宽度
        height  设置图片的高度
        border  边框粗细
        align   规定如何根据文本来排列图像
    图片跳转，将其放入a中
表格
    table   表示表格
    tr      表示表格中的行（每一行可以包含一个或多个td或th）
    td      表示表格中的标准单元格
    th      表示表格中的表头单元格（具有标题的效果，字体加粗，居中显示）

    table常用属性
        border      表格的边框
        width       表格的宽度（像素或百分比）上一级元素的百分比或屏幕的百分比
        align       表格的对齐方式（left right center）

    tr常用属性
        align       每行文本内容水平对齐方式
        valign      每行文本内容垂直对齐方式（top）
        bgcolor     设置行的背景颜色

    合并单元格
        纵向合并    rowspan
        横向合并    colspan
表单
    form
        表单用于向服务器传输数据。form元素是块级元素，其前后会自动换行。
        表单提交，必须设置表单元素的name属性值，否则无法获取数据。
        表单需要结合表单元素一起使用。

        常用属性
            action  提交表单的地址
            method  提交方式（不区别大小）
                GET提交
                POST提交
            target  提交数据时打开窗口的方式
                _self   当前窗口
                _blank  空白窗口
            GET请求与POST请求的区别（post请求需要服务器的支持）
                1.get请求时参数会跟在浏览器地址栏后面，而post请求不会（post请求会将数据存放在请求体中）
                2.get请求相对与post请求而言，不那么安全
                3.get请求传递的数据长度是有限的，而post请求基本没有限制（长度与服务器相关）
                4.get请求比post请求快（2倍左右）
                5.get请求有缓存（会将数据存放在浏览器中，即本地磁盘中），post请求无缓存

    input标签（行内元素）
        type        元素的类型
            alt         定义图像输入的代替文本
            text        文本框
            password    密码框
            radio       单选框
            checkbox    复选框
            file        文件域
            hidden      隐藏域
            button      普通按钮
            submit      提交按钮
            reset       重置按钮
            date        日期框
        value       元素的默认值
        readonly    只读状态
        maxlength   最大输入长度
        disabled    禁用标签

        注意：
            1.单选框需要通过name属性设置为一组，复选框也需要通过name属性设置为一组
            2.如果上传文件的表单，则表单需要设置一个属性 enctype="multipart/form-data",提交方式为post请求
            3.没有name属性是无法提交数据的！！！
    textarea标签
        定义可输入多行文本的控件
        cols    文本的可见宽度
        rows    文本的可见行数
    label标签
        for属性
        当for属性与元素的id属性值一致时，点击label标签，会自动元素聚焦
    button标签
        type="button"       普通按钮
        type="submit"（默认）提交按钮
        type="reset"        重置按钮
    下拉框
        select  下拉框标签
        option  下拉框的选项标签

        select常用属性
            multiple    设置下拉框可多选
            size        设置下拉框可见选项数
            disabled    禁用元素
        option常用属性
            selected    默认选中项
            disabled    禁用某一选项
            value       提交给服务器的选项值
                如果设置了value属性值，则提交的是value的值
                如果未设置value属性值，则提交option双标签中的文本值
字符实体
    <        &lt;
    >        &gt;
    空格      &nbsp;
    版权      &copy;
-->
<body bgcolor="pink" text="blue">
    <a name="top"></a>
    <br>

    &lt;h2&gt;&nbsp;你&nbsp;好&nbsp;&lt;/h2&gt;<br>
    版权声明：&copy;

    <select name="city">
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>

    <form action="http://www.baidu.com" method="get">
        <input type="text" name="ulname"/>
        <button type="button">普通按钮</button>
        <button>提交按钮</button>
        <button type="reset">重置按钮</button>
    </form>

    <label for="jianjie"> 简介：<textarea cols="30" rows="10" name="jianjie1" id="jianjie"></textarea></label><br/>

    <form action="http://www.baidu.com" method="get">
        文本框：<input type="text" value="zhangsan" maxlength="10" name="youname"/><br/>
        文本框：<input type="text" value="zhangsan" readonly="readonly"/><br/>
        密码框：<input type="password"/><br/>
        单选框： <input type="radio" value="man" name="sex"/>男
        <input type="radio" value="woman" name="sex"/>女 <br/>
        复选框：<input type="checkbox" value="1" name="test"/>1
        <input type="checkbox" value="2" name="test"/>2
        <input type="checkbox" value="3" name="test"/>3 <br/>
        文本域：<input type="file"/><br/>
        隐藏域：<input type="hidden" value="admin"/><br/>
        普通按钮：<input type="button" value="普通按钮"/><br/>
        提交按钮：<input type="submit" value="提交按钮"/><br/>
        重置按钮：<input type="reset" value="重置按钮"/><br/>
        日期框：<input type="date"><br/>
    </form>

    <form action="http://www.baidu.com" method="get" target="_blank">
        姓名：<input type="text" name="uname"/>
        <button>提交</button>
    </form>

    <table border="1" width="500px" align="center" style="border-collapse: collapse;"><!-- CSS样式 合并表格边框 -->
        <tr>
            <th>班级</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr align="center">
            <td rowspan="2">101班</td>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr align="center">
            <td>李四</td>
            <td>19</td>
            <td>女</td>
        </tr>
        <tr align="center">
            <td>102班</td>
            <td>王五</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr align="center">
            <td colspan="4">测试3人</td>
        </tr>
    </table>

    <img src="img/rain1.png" title="丛雨" width="300px">
    <img src="img/sword.jpg" title="剑来" width="300px">

    <b id="zt">粗体</b> -- <strong>粗体</strong><br>
    <i>斜体</i><br>
    <u>下划线</u><br>
    <del>中划线</del><br>
    H<sub>2</sub>O<br>
    2<sup>2</sup>
    <pre>
        HELLO      NEW
        YEAR
    </pre>
    <font color="red" size="5" face="楷体"> hello</font>
    <div align="center">层，块级元素，标签会自动换行</div>
    <div align="center">层，块级元素，标签会自动换行</div>
    <span>块，行内元素，标签不会自动换行</span>
    <span>块，行内元素，标签不会自动换行</span>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>

    <hr width="50%" align="left" size="10"/>

    <p align="left">p</p>
    <p align="right">p</p>
    <p align="center">p</p>

    <hr/>
    hello <br> world

    <hr>

    <a name="xl"></a>
    <h2>无序列表</h2>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <ul type="disc">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <ul type="square">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <ul type="circle">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>

    <hr>
    <h2>有序列表</h2>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="1">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="a">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="A">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="i">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <ol type="I">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>

    <a href="#xl">回到序列表头</a>
    <a href="#zt">回到字体位置</a>
    <p align="right"><a href="#top">回到上面</a></p>
</body>
</html>